<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Slot Editor</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyui/demo/demo.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/o2mation.js"></script>

    <script type="text/javascript">
        var componentId;
        var dataMap;

        var start_date;
        var end_date;

        function select_start_date(date){
            start_date.value.value.year = date.getFullYear();
            start_date.value.value.month = date.getMonth();
            start_date.value.value.day = date.getDate();
        }

        function select_end_date(date){
            end_date.value.value.year = date.getFullYear();
            end_date.value.value.month = date.getMonth();
            end_date.value.value.day = date.getDate();
        }

        function requestComponent(id){
            componentId = id;
            requestLoadComponent(id, 1, function(data, status){
                if(status == 200){
                    var jsoncontent = JSON.parse(data);
                    dataMap = {};
                    console.log(jsoncontent)
                   

                    var comp = jsoncontent.components[0];                    
                    for(j in comp.properties){
                        prop = comp.properties[j];
                        if(prop.name == 'start'){
                            value = prop.value;
                            value = value.value;
                            start_date = {
                                'id': comp.id,
                                'name': prop.name,
                                'value':{
                                    'type': 'component.Date',
                                    'value':{
                                        'year': value.year,
                                        'month': value.month,
                                        'day': value.day
                                    }
                                }
                            }
                            $('#c1').calendar('moveTo', new Date(value.year, value.month, value.day));
                            $('#c1').calendar({
                                onSelect: function(date){
                                    select_start_date(date);
                                }
                            });
                        } else if(prop.name == 'end'){
                            value = prop.value;
                            value = value.value;
                            end_date = {
                                'id': comp.id,
                                'name': prop.name,
                                'value':{
                                    'type': 'component.Date',
                                    'value':{
                                        'year': value.year,
                                        'month': value.month,
                                        'day': value.day
                                    }
                                }
                            }
                            $('#c2').calendar('moveTo', new Date(value.year, value.month, value.day));
                            $('#c2').calendar({
                                onSelect: function(date){
                                    select_end_date(date);
                                }
                            });
                        } 
                    }

                    var objArray = new Array();
                    var comp = jsoncontent.components[1];
                    dataMap.pg1 = new Array()
                    for(j in comp.properties){
            
                        let obj = encodeToJQueryDataGrid(comp.name, comp.properties[j]);
                        if(obj != undefined){
                            obj.handle = comp.id;
                            objArray.push(obj);
                            dataMap.pg1.push(obj);
                        }
                    }
                    $('#pg1').propertygrid('loadData', objArray);

                    objArray = new Array();
                    dataMap.pg2 = new Array()
                    var comp = jsoncontent.components[2];
                    for(j in comp.properties){
            
                        let obj = encodeToJQueryDataGrid(comp.name, comp.properties[j]);
                        if(obj != undefined){
                            objArray.push(obj);
                            dataMap.pg2.push(obj);
                            obj.handle = comp.id;
                        }
                    }
                    $('#pg2').propertygrid('loadData', objArray);

                    objArray = new Array();
                    dataMap.pg3 = new Array()
                    var comp = jsoncontent.components[3];
                    for(j in comp.properties){
            
                        let obj = encodeToJQueryDataGrid(comp.name, comp.properties[j]);
                        if(obj != undefined){
                            objArray.push(obj);
                            dataMap.pg3.push(obj);
                            obj.handle = comp.id;
                        }
                    }
                    $('#pg3').propertygrid('loadData', objArray);


                    objArray = new Array();
                    dataMap.pg4 = new Array()
                    var comp = jsoncontent.components[4];
                    for(j in comp.properties){
            
                        let obj = encodeToJQueryDataGrid(comp.name, comp.properties[j]);
                        
                        if(obj != undefined){
                            objArray.push(obj);
                            dataMap.pg4.push(obj);
                            obj.handle = comp.id;
                        }
                    }
                    $('#pg4').propertygrid('loadData', objArray);

                    objArray = new Array();
                    dataMap.pg5 = new Array()
                    var comp = jsoncontent.components[5];
                    for(j in comp.properties){
            
                        let obj = encodeToJQueryDataGrid(comp.name, comp.properties[j]);
                        
                        if(obj != undefined){
                            objArray.push(obj);
                            dataMap.pg5.push(obj);
                            obj.handle = comp.id;
                        }
                    }
                    $('#pg5').propertygrid('loadData', objArray);

                    objArray = new Array();
                    dataMap.pg6 = new Array()
                    var comp = jsoncontent.components[6];
                    for(j in comp.properties){
            
                        let obj = encodeToJQueryDataGrid(comp.name, comp.properties[j]);
                        
                        if(obj != undefined){
                            objArray.push(obj);
                            dataMap.pg6.push(obj);
                            obj.handle = comp.id;
                        }
                    }
                    $('#pg6').propertygrid('loadData', objArray);

                    objArray = new Array();
                    dataMap.pg7 = new Array()
                    var comp = jsoncontent.components[7];
                    for(j in comp.properties){
            
                        let obj = encodeToJQueryDataGrid(comp.name, comp.properties[j]);
                        
                        if(obj != undefined){
                            objArray.push(obj);
                            dataMap.pg7.push(obj);
                            obj.handle = comp.id;
                        }
                    }
                    $('#pg7').propertygrid('loadData', objArray);
                    
                }
            });
        }
        
        function refresh(){
            requestComponent(componentId);
        }

        function save(){
            var data = new Array();

            data.push(start_date);
            data.push(end_date);

            var rows = $("#pg1").propertygrid("getRows"); 
            for(var i=0;i<rows.length;i++){
                data.push(JQueryDataGridToValue(dataMap.pg1[i], rows[i]));
            }

            rows = $("#pg2").propertygrid("getRows"); 
            for(var i=0;i<rows.length;i++){
                data.push(JQueryDataGridToValue(dataMap.pg2[i], rows[i]));
            }

            rows = $("#pg3").propertygrid("getRows"); 
            for(var i=0;i<rows.length;i++){
                data.push(JQueryDataGridToValue(dataMap.pg3[i], rows[i]));
            }

            rows = $("#pg4").propertygrid("getRows"); 
            for(var i=0;i<rows.length;i++){
                data.push(JQueryDataGridToValue(dataMap.pg4[i], rows[i]));
            }

            rows = $("#pg5").propertygrid("getRows"); 
            for(var i=0;i<rows.length;i++){
                data.push(JQueryDataGridToValue(dataMap.pg5[i], rows[i]));
            }

            rows = $("#pg6").propertygrid("getRows"); 
            for(var i=0;i<rows.length;i++){
                data.push(JQueryDataGridToValue(dataMap.pg6[i], rows[i]));
            }

            rows = $("#pg7").propertygrid("getRows"); 
            for(var i=0;i<rows.length;i++){
                data.push(JQueryDataGridToValue(dataMap.pg7[i], rows[i]));
            }

            var http = new XMLHttpRequest();
            var url = '/properties';
            http.onreadystatechange = function(){
                if(http.readyState == 4 && http.status == 200){
                    
                } else {

                }
            }
            http.open("POST", url);
            http.setRequestHeader('content-type', 'application/json');
            http.send(JSON.stringify(data));
        }

        function main(){

        }
    </script>
</head>
<body onload = "main()">
    <div style="margin:0px 0;"></div>
    <div class="easyui-layout" style="width:900px;height:550px;">
        <div data-options="region:'west',split:true" title="Calendar" style="width:280px;">
            <div class="easyui-layout" style="width:25000px;height:500px;">
                <div data-options="region:'north', title:'Start Date'"  style="height:250px">
                    <div id='c1' class="easyui-calendar" style="width:250px;height:250px;"></div>
                </div>
                <div data-options="region:'south', title:'End Date'"  style="height:250px;">
                    <div id='c2' class="easyui-calendar" style="width:250px;height:250px;"></div>
                </div>
            </div>
        </div>
        <div data-options="region:'center',title:'Week',iconCls:'icon-schedule'">
            <div class="easyui-tabs" data-options="fit:true,border:false,plain:true">
                <div title="Monday"  style="padding:5px">
                    <table id="pg1" class="easyui-propertygrid" style="width:70%" data-options="
                                showGroup:true,
                                columns:[[
                                    {field:'name',title:'Name',width:100,sortable:true},
                                    {field:'value',title:'Value',width:200,sortable:true} 
                                ]],
                                scrollbarSize:0
                            ">
                    </table>
                </div>
                <div title="Tuesday" style="padding:5px">
                    <table id="pg2" class="easyui-propertygrid" style="width:70%" data-options="
                                showGroup:true,
                                columns:[[
                                    {field:'name',title:'Name',width:100,sortable:true},
                                    {field:'value',title:'Value',width:200,sortable:true} 
                                ]],
                                scrollbarSize:0
                            ">
                    </table>
                </div>
                <div title="Wednesday" style="padding:5px">
                    <table id="pg3" class="easyui-propertygrid" style="width:70%" data-options="
                                showGroup:true,
                                columns:[[
                                    {field:'name',title:'Name',width:100,sortable:true},
                                    {field:'value',title:'Value',width:200,sortable:true} 
                                ]],
                                scrollbarSize:0
                            ">
                    </table>
                </div>
                <div title="Thursday" style="padding:5px">
                    <table id="pg4" class="easyui-propertygrid" style="width:70%" data-options="
                                showGroup:true,
                                columns:[[
                                    {field:'name',title:'Name',width:100,sortable:true},
                                    {field:'value',title:'Value',width:200,sortable:true} 
                                ]],
                                scrollbarSize:0
                            ">
                    </table>
                </div>
                <div title="Friday" style="padding:5px">
                    <table id="pg5" class="easyui-propertygrid" style="width:70%" data-options="
                                showGroup:true,
                                columns:[[
                                    {field:'name',title:'Name',width:100,sortable:true},
                                    {field:'value',title:'Value',width:200,sortable:true} 
                                ]],
                                scrollbarSize:0
                            ">
                    </table>
                </div>
                <div title="Saturday" style="padding:5px">
                    <table id="pg6" class="easyui-propertygrid" style="width:70%" data-options="
                                showGroup:true,
                                columns:[[
                                    {field:'name',title:'Name',width:100,sortable:true},
                                    {field:'value',title:'Value',width:200,sortable:true} 
                                ]],
                                scrollbarSize:0
                            ">
                    </table>
                </div>
                <div title="Sunday" style="padding:5px">
                    <table id="pg7" class="easyui-propertygrid" style="width:70%" data-options="
                                showGroup:true,
                                columns:[[
                                    {field:'name',title:'Name',width:100,sortable:true},
                                    {field:'value',title:'Value',width:200,sortable:true} 
                                ]],
                                scrollbarSize:0
                            ">
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div style="margin:20px 0;"></div> 
    <button onclick="save()" style="width:100px;">Save</button>  
    <button onclick="refresh()" style="width:100px;">Refresh</button>
</body>
</html>